import React, { useState } from "react";
import { NavBar, Tabs, Button } from "antd-mobile";
import { ProductCard, Sticky, Popup, Cell } from "react-vant";
import { useLocation, useNavigate } from "react-router-dom";
import {
  ExclamationCircleOutline,
  SendOutline,
  LinkOutline,
} from "antd-mobile-icons";
import ChatRoom from "../../components/ChartRoom";
import img from "../../assets/1.png";
import "./index.scss";

const Index: React.FC = () => {
  interface TabItem {
    key: string;
    title: string;
    img: string;
    children?: Array<TabItem>;
    id?: string;
  }

  const location = useLocation();
  const navigate = useNavigate();
  const [list, setList] = useState(location.state);
  const [gzflag, setgzflag] = useState(false);
  const [state, setState] = useState("");
  const back = () => {
    navigate(-1);
  };
  const kg = () => {
    setgzflag(!gzflag);
  };
  const ask = (items: TabItem) => {
    navigate("/ask", { state: items });
  };
  const towatch = (items: TabItem) => {
    navigate("/watchvideo", { state: items });
  };

  const onClose = () => setState("");
  return (
    <div>
      <Sticky>
        <NavBar
          onBack={back}
          right={
            <>
              <ExclamationCircleOutline
                fontSize={20}
                onClick={() => navigate("/complaint")}
              />
              &emsp;&emsp;
              <SendOutline fontSize={20} onClick={() => setState("bottom")} />
            </>
          }
        >
          {list.items.title}
        </NavBar>
      </Sticky>
      <div>
        <div className="mp4">
          <video controls id="video1" autoPlay>
            <source
              src="http://10.59.9.18/video/health/cut/ek/ek1.mp4"
              type="video/mp4"
            />
          </video>
        </div>
        <main>
          <Tabs>
            <Tabs.Tab title="文稿" key="fruits">
              <ProductCard
                thumb={img}
                desc={list.items.name}
                title={list.items.Department}
                tags={
                  <>
                    {gzflag ? (
                      <Button className="btnyes" onClick={() => kg()}>
                        <span className="wgzy">已关注</span>
                      </Button>
                    ) : (
                      <Button className="btnno" onClick={() => kg()}>
                        <span className="wgz">+关注</span>
                      </Button>
                    )}
                  </>
                }
              />
              <div className="butts">
                <Button
                  color="primary"
                  fill="outline"
                  onClick={() => towatch(list.items)}
                >
                  观看课堂
                </Button>
                <Button
                  color="primary"
                  fill="outline"
                  onClick={() => ask(list.items)}
                >
                  去问TA
                </Button>
              </div>
            </Tabs.Tab>
            <Tabs.Tab title="互动" key="vegetables">
              <ChatRoom />
            </Tabs.Tab>
          </Tabs>

          <Popup
            visible={state === "bottom"}
            onClose={onClose}
            style={{ height: "30%" }}
            position="bottom"
          >
            <div
              style={{
                display: "flex",
                justifyContent: "space-around",
                padding: "15px",
              }}
            >
              <img src="../../../public/image/wx.png" alt="" />
              <img src="../../../public/image/pyq.png" alt="" />
              <img src="../../../public/image/wb.png" alt="" />
              <img src="../../../public/image/qq.png" alt="" />
            </div>
            <div>
              <Cell>
                <LinkOutline />
                复制链接
              </Cell>
              <p style={{ textAlign: "center" }} onClick={onClose}>
                取消
              </p>
            </div>
          </Popup>
        </main>
      </div>
    </div>
  );
};

export default Index;
